<script setup>
import {ref, defineProps, defineExpose, defineEmits} from "vue";
const dom = defineProps(['appSidepanelCss','searchCallBack'])
const emit = defineEmits(['resetSidePanel'])
function handleClick() {
  let appSidepanelCss = dom.appSidepanelCss;
  if (appSidepanelCss === 'sidepanel-visible') {
    emit('resetSidePanel',false)
  } else {
    emit('resetSidePanel',true)
  }
}
/*Mobile search*/
function handleTriggerClick(){
  dom.searchCallBack.searchToggle()
  if(searchMobileTriggerIconCss === 'fa-magnifying-glass') {
    searchMobileTriggerIconCss.value = ' fa-xmark '
  } else {
    searchMobileTriggerIconCss.value = ' fa-magnifying-glass '
  }
}
const sidepanelTogglerDom = ref(null);
const searchMobileTriggerDom = ref(null);
const searchMobileTriggerIconCss = ref(' fa-magnifying-glass ');
const sidePanelDrop = () => {
  sidepanelTogglerDom.value.click()
}
defineExpose({sidePanelDrop})
</script>
<template>
  <div class="col-auto">
    <a v-on:click="handleClick" ref="sidepanelTogglerDom" id="sidepanel-toggler" class="sidepanel-toggler d-inline-block d-xl-none">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img">
        <title>Menu</title>
        <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"
              d="M4 7h22M4 15h22M4 23h22"></path>
      </svg>
    </a>
  </div><!--//col-->
  <div v-on:click="handleTriggerClick" ref="searchMobileTriggerDom" class="search-mobile-trigger d-sm-none col">
    <i class="search-mobile-trigger-icon fa-solid " :class="searchMobileTriggerIconCss"></i>
  </div><!--//col-->
</template>